//引入 path 和 webpack
const path = require('path')
const webpack = require('webpack') 

const htmlWebpackPlugin = require('html-webpack-plugin')

//解决 vue组件问题
const vueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports = {

    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, './dist/js'),
        filename: 'bound.js'
    },

    devServer: {
        open: true,
        port: 3002,
        hot: true
    },

    //loader
    module: {
        rules: [
            //css文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
             //处理less文件
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },

            //图片路径问题
            {
                test: /\.(png|jpg|jpeg|bem|gif)$/,
                use: ['url-loader?limit=1314&name=[hash:8]_[name].[ext]']
            },

            //处理字体图标
            {
                test: /\.(ttf|woff|woff2|svg|eot)$/,
                use: ['url-loader']
            },

            //处理ES6以上高级语法
            {
                test: /\.js$/,
                use: 'babel-loader', exclude: /node_modules/
            },

            //处理ES6以上高级语法
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ]
    },

    //插件
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html')
        }),
        new vueLoaderPlugin()
    ]
}